<template>
    <RealElDialog :close-on-click-modal="false" :before-close="beforeClose" @close="dialogClose">
        <div @click.capture="panelClick">
            <slot></slot>
        </div>
        <template #footer>
            <slot name="footer" :foolish="clickedNum > 0"></slot>
        </template>
    </RealElDialog>
</template>
<script lang="ts">
export default {
    name: 'ElDialog'
}
</script>
<script setup lang="ts">
import { ElDialog as RealElDialog, ElMessageBox } from 'element-plus'
import { useAttrs, ref } from 'vue'

const attrs: object = useAttrs()

let clickedNum = ref(0)
const panelClick = () => {
    clickedNum.value++
}

const beforeClose = (done) => {
    if ('confirm' in attrs && attrs['confirm'] !== false) {
        if (clickedNum.value > 0) {
            ElMessageBox.confirm(
                '当前内容可能存在修改，确认继续?',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                clickedNum.value = 0
                done()
            }).catch(() => {
            })
        } else {
            done()
        }
    } else {
        done()
    }
}

const dialogClose = () => {
    clickedNum.value = 0
}
</script>